<template>
	<view class="container999" @touchstart="refreshStart" @touchmove="refreshMove" @touchend="refreshEnd">
		<!-- 刷新组件需搭配scroll-view使用，并在pages.json中添加 "disableScroll":true-->
		<refresh ref="refresh" @isRefresh="isRefresh"></refresh>
		<view class="nav">
			<!-- #ifdef H5 -->
			<view style="height: 44px;width: 100%;">边距盒子</view>
			<!-- #endif -->
			<!-- 搜索 -->
			<!-- <view class='searchInput999'>
				<view class='searchBox999'>
					<image src='/static/icon-search.png' class='search999'></image>
				</view>
				<input class='input999' placeholder="输入关键词"></input>
			</view> -->
			<!-- 导航栏 agents导航栏标题 -->
			<navTab ref="navTab" :tabTitle="tabTitle" @changeTab="changeTab"></navTab>
		</view>
		<!-- swiper切换 swiper-item表示一页 scroll-view表示滚动视窗 -->
		<swiper style="min-height: 100vh;" :current="currentTab" @change="swiperTab">
			<swiper-item v-for="(listItem, listIndex) in list" :key="listIndex">
				<scroll-view style="height: 100%;" scroll-y="true" @scrolltolower="lower1" scroll-with-animation :scroll-into-view="toView">
					<view :id="'top' + listIndex" style="width: 100%;height: 115rpx;"> </view>
					<view class="content">
						<view class="card" v-for="(item, index) in listItem" v-if="listItem.length > 0 && listIndex !=3" :key="index" @click="gotoRepo(item)">
							<view style="width: 100%;overflow: hidden;text-overflow:ellipsis;">
								<image style="width: 48rpx;height: 48rpx;float: left;" :src="item.owner.new_portrait" @click.stop="goUser(item)"></image>
								<view style="word-break: break-all;overflow: hidden;text-overflow:ellipsis;width: 600rpx; ">
									<text  style="line-height: 50rpx;margin-left: 10rpx;font-size: 32rpx;font-weight: bold;">{{ item.path_with_namespace }}</text>
								</view>
							</view>
							<view class="desc uni-bold" style="margin-top: 5rpx;color: #999;">
								最近更新 {{timeToString(item.last_push_at)}}
							</view>
							<view class="desc" style="margin-top: 5rpx;color: #999;">
								{{item.description}}
							</view>
							<view class="info" style="margin-top: 15rpx;font-weight: bold;height: 30rpx ; line-height: 30rpx;">
								<image src="../../static/code.png" mode="" style="width: 28rpx;height: 28rpx;margin-right: 15rpx;"></image>
								<text style="margin-right: 40rpx;">{{item.language}}</text>
								<image src="../../static/star_in.png" mode="" style="width: 28rpx;height: 28rpx;margin-right: 15rpx;"></image>
								<text style="margin-right: 40rpx;">{{item.stars_count}}</text>
								<image src="../../static/eye.png" mode="" style="width: 28rpx;height: 28rpx;margin-right: 15rpx;"></image>
								<text style="margin-right: 40rpx;">{{item.watches_count}}</text>
								<image src="../../static/fork.png" mode="" style="width: 28rpx;height: 28rpx;margin-right: 15rpx;"></image>
								<text style="margin-right: 40rpx;">{{item.forks_count}}</text>
							</view>
						</view>
						
						<view class="languages" v-if="listIndex == 3" v-for="(item, index) in listItem" :key="index" :data-id="item.id" :data-name="item.name" @tap="goLanguage(item.id,item.name)">
							<text class="lan_name">{{item.name}}</text>
							<text class="lan_count">{{item.projects_count}}</text>
						</view>
					</view>
					<view class="noCard" v-if="listItem.length === 0">暂无信息</view>
					<view style="width: 100%;height: 100upx;opacity:0;">底部占位盒子</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
const util = require('../../utils/util.js');
import refresh from '../../components/refresh.vue';
import navTab from '../../components/navTab.vue';
import tabBar4 from '../../components/tabBar4.vue';

import {languages,lan_projects,popular,latest,featured} from '../../utils/api/project.js'
export default {
	components: { refresh, navTab, tabBar4 },
	data() {
		return {
			currentPage: 'index',
			toView: '', //回到顶部id
			tabTitle: ['推荐', '热门', '最近', '语言'], //导航栏格式 --导航栏组件
			currentTab: 0, //sweiper所在页
			pages: [1, 1, 1, 1], //第几个swiper的第几页
			list: [[], [], [], []] //数据格式
		};
	},
	onLoad(e) {
		uni.showLoading({})
		this.isRefresh()
		// if(this.list[0].length == 0){
		// 	featured(1).then(res => {
		// 		uni.hideLoading()
		// 		this.list[0] = res.data
		// 	})
		// }
		if(this.list[1].length == 0){
			popular(1).then(res => {
				uni.hideLoading()
				this.list[1] = res.data
			})
		}
		if(this.list[2].length == 0){
			latest(1).then(res => {
				uni.hideLoading()
				this.list[2] = res.data
			})
		}
		if(this.list[3].length == 0){
			languages().then(res => {
				uni.hideLoading();
				this.list[3] = res.data
			})
		}
	},
	onShow() {},
	onHide() {},
	methods: {
		timeToString(utc){
			if(!utc){
				return '00'
			}
			if(!isNaN(utc)){
				return utc >= 10 ? utc : '0' + utc
			}
			let d = new Date(utc);
			let datetime=d.getFullYear() 
			+ '-' 
			+ this.timeToString(d.getMonth() + 1)
			+ '-' 
			+ this.timeToString(d.getDate())
			+ ' ' 
			+ this.timeToString(d.getHours())
			+ ':' 
			+ this.timeToString(d.getMinutes())
			+ ':' 
			+ this.timeToString(d.getSeconds());
			return datetime
		},
		goUser(item){
			// TODO : 有时候会跳转到'错误'的地方 比如 LiteOS 可能是企业或者组织开源项目
			uni.navigateTo({
				url : '/pages/common/user?name='+item.owner.username
			})
		},
		gotoRepo(item){
			uni.navigateTo({
				url: '/pages/common/repo?name='+item.namespace.path+'&repo='+item.path + '&id=' + item.id
			})
		},
		goLanguage(id,name){
			console.log(id)
			uni.navigateTo({
				url:"languages/languages?id="+id+"&name="+name
			})
		},
		toTop() {
			this.toView = '';
			setTimeout(() => {
				this.toView = 'top' + this.currentTab;
			}, 10);
		},
		changeTab(index) {
			this.currentTab = index;
			if (this.list[this.currentTab].length == 0){
				this.isRefresh()
			}
		},
		// 其他请求事件 当然刷新和其他请求可以写一起 多一层判断。
		isRequest() {
			return new Promise((resolve, reject) => {
				setTimeout(() => {
				if (this.list[this.currentTab].length > 0){
					this.pages[this.currentTab]++;
				}
				var that = this;
				// 推荐
				if(this.currentTab == 0){
					featured(this.pages[this.currentTab]).then(res => {
						uni.hideLoading();
						resolve(res.data)
					}).catch(res => {
						this.requestError()
					})
				}
				//  热门
				if(this.currentTab == 1){
					popular(this.pages[this.currentTab]).then(res => {
						uni.hideLoading();
						resolve(res.data)
					}).catch(res => {
						this.requestError()
					})
				}
				// 最近
				if (this.currentTab == 2){
					latest(this.pages[this.currentTab]).then(res => {
						uni.hideLoading();
						resolve(res.data)
					}).catch(res => {
						this.requestError()
					})
				}
				// 语言
				if (this.currentTab == 3){
					if(this.list[this.currentTab].length > 0){
						uni.hideLoading()
						return
					}else{
						languages().then(res => {
							uni.hideLoading();
							resolve(res.data)
						}).catch(res => {
							this.requestError()
						})
					}
					
				}
				// setTimeout(() => {
				// 	uni.hideLoading();
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: `请求第${that.currentTab + 1}个导航栏的第${that.pages[that.currentTab]}页数据成功`
				// 	});
				// 	let newData = ['新数据1', '新数据2', '新数据3'];
				// 	resolve(newData);
				}, 1000);
			});
		},
		// swiper 滑动
		swiperTab: function(e) {
			var index = e.detail.current; //获取索引
			this.$refs.navTab.longClick(index);
		},
		// 加载更多 util.throttle为防抖函数
		lower1: util.throttle(function(e) {
			// console.log(`加载${this.currentTab}`); //currentTab表示当前所在页数 根据当前所在页数发起请求并带上page页数
			uni.showLoading({
				title: '加载中',
				mask: true
			});
			this.isRequest().then(res => {
				let tempList = this.list;
				tempList[this.currentTab] = tempList[this.currentTab].concat(res);
				this.list = tempList;
				this.$forceUpdate(); //二维数组，开启强制渲染
			});
		}, 300),
		// 刷新touch监听
		refreshStart(e) {
			this.$refs.refresh.refreshStart(e);
		},
		refreshMove(e) {
			this.$refs.refresh.refreshMove(e);
		},
		refreshEnd(e) {
			this.$refs.refresh.refreshEnd(e);
		},
		isRefresh() {
			this.pages[this.currentTab] = 1
			this.list[this.currentTab] = []
			this.isRequest().then(res=>{
				uni.hideLoading()
				this.list[this.currentTab] = res
				this.$forceUpdate();
				this.$refs.refresh.endAfter(); //刷新结束调用
			})
		},
		requestError() {
			if (this.pages[this.currentTab] > 0){
				this.pages[this.currentTab] --
			}
			uni.hideLoading()
			uni.showToast({
				title:"请求数据失败 , 请稍后重试"
			})
			this.$refs.refresh.endAfter(null);
		}
	}
};
</script>

<style lang="scss">
.languages{
	width: 650rpx;
	margin-left: 30rpx;
	height: 100rpx;
	margin-top: 25rpx;
	background-color: white;
	line-height: 100rpx;
	padding-left: 20rpx;
	padding-right: 20rpx;
	border-radius: 25rpx;
	font-weight: bold;
}
.languages .lan_count {
	float: right;
}
.container999 {
	width: 100vw;
	font-size: 28upx;
	min-height: 100vh;
	overflow: hidden;
	color: #6b8082;
	position: relative;
	background-color: #f6f6f6;
}
.content {
	width: 100%;
	font-size: 28upx;
}

.card {
	width: 90%;
	// height: 368upx;
	background-color: white;
	margin: 0 auto 30rpx auto;
	padding: 20rpx 20rpx;
	background: #ffffff;
	box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
	border-radius: 5px;
	position: relative;
}

.noCard {
	width: 90%;
	height: 200upx;
	margin: auto;
	background-color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #999999;
	box-shadow: 0 0 10upx 0 rgba(0, 0, 0, 0.1);
	border-radius: 10upx;
}

.nav {
	position: fixed;
	left: 0;
	top: 0;
	color: white;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	font-size: 28upx;
	background-color: #50b7ea;
	z-index: 996;
	font-weight: bold;
}

.searchInput999 {
	width: 90%;
	margin: 0 auto;
	background: white;
	border-radius: 30upx;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 56upx;
}

.search999 {
	width: 32upx;
	height: 32upx;
}

.searchBox999 {
	width: 56upx;
	height: 56upx;
	display: flex;
	justify-content: center;
	align-items: center;
}

.input999 {
	color: #999;
	width: 80%;
}
</style>
